{% extends "myadmin/base.html" %}


{% block main_body %}
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        菜品管理
        <small>订餐系统后台管理</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">菜品信息管理</li>
    </ol>
</section>

<!-- Main content -->
<section class="content container-fluid">

    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h2 class="box-title"> <span class="glyphicon glyphicon-calendar" aria-hidden="true">添加菜品信息</h2>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form class="form-horizontal" action="{% url 'myadmin_product_insert' %}" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="box-body">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">店铺名称：</label>
                            <div class="col-sm-4">
                                <select name="shop_id" id="shop_id" onchange="doLoadCategory()" class="form-control select2" style="width: 100%;">
                                    {% for svo in shoplist %}
                                    <option value="{{ svo.id }}">{{ svo.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">菜品分类：</label>
                            <div class="col-sm-4">
                                <select name="category_id" id="category_id" class="form-control select2" style="width: 100%;">

                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">菜品名称：</label>
                            <div class="col-sm-4">
                                <input type="text" name="name" class="form-control" id="inputText3" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">单价：</label>
                            <div class="col-sm-4">
                                <input type="text" name="price" class="form-control" id="inputText3" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">菜品图片：</label>
                            <div class="col-sm-4">
                                <input type="file" name="cover_pic" />
                            </div>
                        </div>

                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">提交</button> &nbsp;
                            <button type="submit" class="btn btn-default">重置</button>
                            <div class="col-sm-offset-2 col-sm-10">
                            </div>
                            <!-- /.box-footer -->
                </form>
            </div>
            <!-- /.box -->
        </div>
    </div>

</section>
<!-- /.content -->
{% endblock %}


{% block loadjavascript %}
<script type="text/javascript">

    //自定义函数，实现通过店铺id，Ajax加载对应的菜品分类信息
    function doLoadCategory(){
        //获取选中的id号
        var id = $("#shop_id").val();
        $("#category_id").empty();
        $.ajax({
            url: "/myadmin/category/load/"+id,
            type: 'get',
            data: {},
            dataType:'json',
            success:function(res){
                if(res.data.length<1)
                    return;
                var data = res.data;
                var select = $("#category_id")
                for(var i=0;i<data.length;i++){
                    $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo(select)
                    //select.append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
                }

            }
        });

    }
    doLoadCategory()
</script>
{% endblock %}